<template>
  <div>
    <div class="flex-a flex-d-r-r">
      <span v-if="is_operating" class="right-title">操作</span>
      <span v-if="is_status" class="right-title" style="margin-right: 10px">状态</span>
      <span v-if="is_over_time" class="right-title" style="margin-right: 16px">完成时间</span>
      <span v-if="is_schedule" class="right-title" style="margin-right: 36px">进度</span>
      <span v-if="is_align" class="right-title" style="margin-right: 36px">对齐</span>
      <span v-if="is_category" class="right-title" style="margin-right: 30px">类别</span>
      <span v-if="is_time_limit" style="margin-right: 56px" class="right-title">时间</span>
    </div>
    <div v-for="(item, index) in text" :key="index" :class="router_type === 'duty'?'card-content-1':router_type === 'plan'?'card-content-2':'card-content-3'">
      <div class="content-box" :style="index != text.length-1 ? 'border-bottom: 1px solid rgba(0,0,0,0.04);' : ''">
        <div class="flex flex-1 p-a-20 l-h-15" :class="item.is_eit?'input-enter':'b-tran'" @mousedown.prevent @click="focusRichText(index)">

          <div :style="!item.is_eit?valTop(font_size):''"
               :class="!item.is_eit?'content-bit-eit':'content-bit'" style="flex-shrink: 0">
            {{ index + 1 }}
          </div>
          <div style="margin-left: 10px;" class="flex-1 flex">
            <!--
            autoFocus 添加新的时自动获得焦点 判断逻辑是 `内容为空` && `租后一个元素`
            @blur 当失去焦点时触发
            @user-change 当输入框里被艾特的人变化时触发 得到一个数组
             -->
            <RichText v-model="item.htmlText" ref="RichText" :isEdit="personal_eit" :userList="userList"
                      :isAit="isAit" style="min-width: 20px;"
                      :class="contentFont(font_size, font_family)"
                      :autoFocus="!item.content && index === text.length -1"
                      @click.native.stop="handleChangeEit(index)"
                      @blur="richTextBlur($event, item, index)"/>
            <el-tooltip v-if="item.fileList && item.fileList.length && !item.is_eit" class="" effect="light" :content="item.fileList[0].fileName" placement="bottom">
              <div  @click.stop="handleDown(item,index)" style="margin-left: 4px;cursor: pointer">
                <svg-icon class="f-s-16" style="margin-left: 4px" icon-class="appraisefujin"/>
              </div>
            </el-tooltip>
          </div>
        </div>
        <div class="flex features"
             style="position: relative;"
             :style="router_type === 'record'&&type_num !== 0?'':'margin-right: 8px;'"
             >
          <div v-if="is_time_limit"
               @click="handleTimeLimit(index)"
               :class="personal_eit?'cursor-p':''"
               class="text-font m-r-12"
               style="width: 94px;text-align: center"
          >{{ item.startTime?item.startTime:'暂无' }}~{{ item.endTime?item.endTime:'暂无' }}</div>
          <el-time-picker
            v-if="is_time_limit"
            style="position: absolute; z-index: -1"
            :ref="'timePicker'+ index"
            size="mini"
            is-range
            v-model="time_range"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            @change="confirmTimeLimit($event,item,index)"
          >
          </el-time-picker>
          <el-popover
            v-if="is_category"
            placement="bottom"
            v-model="item.record_class"
            :disabled="!personal_eit"
            width="90"
            trigger="click"
          >
            <div class="p-4-0">
              <div class="up-box cursor-p flex-a"
                   @click="changeType('1',item,index)"
              >
                <span class="up-text color-ff">重要</span>
              </div>
              <div class="up-box cursor-p flex-a"
                   @click="changeType('2',item,index)"
              >
                <span class="up-text color-fb">日常</span>
              </div>
              <div class="p-t-12 cursor-p flex-a"
                   @click="changeType('3',item,index)"
              >
                <span class="up-text color-1a">其他</span>
              </div>
            </div>
            <div slot="reference" v-if="is_category"
                 :class="personal_eit?'cursor-p':''"
                 class="text-font flex-a m-r-12">
              <svg-icon class="f-s-16"
                        :class="item.recordClass === '2'?'color-fb':item.recordClass === '1'?'color-ff':'color-1a'"
                        icon-class="appraisetime"/>
              <span class="up-text"
                    :class="item.recordClass === '2'?'color-fb':item.recordClass === '1'?'color-ff':'color-1a'">{{ item.recordClass === '2'?'日常':item.recordClass === '1'?'重要':'其他' }}</span>
            </div>
          </el-popover>
          <el-popover
            v-if="is_schedule || is_align"
            placement="bottom"
            :disabled="is_align || !personal_eit"
            width="90"
            trigger="click"
          >
            <div class="p-4-0-11-0">
              <div class="f-s-16 m-b-4">当前进度</div>
              <el-input
                type="number"
                v-model.number="item.progress"
                :min="0"
                :max="100"
                @input="handleChangeSchedule($event,item,index)"
                @blur="handleEnd(item, index,3)"
              >
                <div class="suffix" slot="suffix">%</div>
              </el-input>
            </div>
            <div slot="reference" v-if="is_schedule || is_align" class="text-font m-r-12"
                 @click="associatePlan(item,index)"
                 style="width: 60px;"
                 :style="personal_eit?'cursor: pointer;':''">
              <el-progress
                color="#1A66E2"
                :width="17"
                :text-inside="true"
                type="circle"
                :percentage="Number(item.progress)"/>
              <span class="f-s-16 color-9"
              >{{ item.progress }}%</span>
            </div>
          </el-popover>
          <div v-if="is_over_time"
               @click="handleEitTime(index)"
               :class="personal_eit?'cursor-p':''"
               class="text-font m-r-12"
          >{{ item.endDate }}
          </div>
          <el-date-picker :ref="'timeEndDate'+ index"
                          v-if="is_over_time"
                          class="no-use"
                          v-model="item.endDate"
                          size="mini"
                          type="date"
                          placeholder="选择日期"
                          @change="handleSelectTime($event,item,index)"
                          style="position: absolute;right: 80px; z-index: -1;"
          >
          </el-date-picker>
          <el-popover
              v-if="is_status"
              placement="bottom"
              :disabled="!personal_eit"
              v-model="item.is_status"
              width="90"
              trigger="click"
          >
            <div class="p-4-0">
              <div class="up-box cursor-p flex-a"
                   @click="changeState('3',item,index)"
              >
                <div class="bit border-ff"><div class="bit-content b-c-ff"></div></div>
                <span class="up-text color-ff">逾期</span>
              </div>
              <div class="up-box cursor-p flex-a"
                   @click="changeState('2',item,index)"
              >
                <div class="bit border-fb"><div class="bit-content b-c-fb"></div></div>
                <span class="up-text color-fb">风险</span>
              </div>
              <div class="p-t-12 cursor-p flex-a"
                   @click="changeState('1',item,index)"
              >
                <div class="bit border-1a"><div class="bit-content b-c-1a"></div></div>
                <span class="up-text color-1a">正常</span>
              </div>
            </div>
            <div slot="reference"
                 :class="personal_eit?'cursor-p':''"
                 class="text-font m-r-12 flex-a">
              <div v-if="!item.state || item.state === '1'" class="bit border-1a"><div class="bit-content b-c-1a"></div></div>
              <span v-if="!item.state || item.state === '1'" class="up-text color-1a">正常</span>
              <div v-if="item.state === '2'" class="bit border-fb"><div class="bit-content b-c-fb"></div></div>
              <span v-if="item.state === '2'" class="up-text color-fb">风险</span>
              <div v-if="item.state === '3'" class="bit border-ff"><div class="bit-content b-c-ff"></div></div>
              <span v-if="item.state === '3'" class="up-text color-ff">逾期</span>
            </div>
          </el-popover>
          <el-popover
              v-if="is_operating"
              placement="bottom"
              v-model="item.is_operating"
              :disabled="!personal_eit"
              width="90"
              trigger="click"
          >
            <div class="p-4-0">
              <el-upload
                action=""
                :show-file-list="false"
                :before-upload="(file) => handleUp(file,item,index)"
                >
                <div class="up-box cursor-p">
                  <img class="up-img" src="@/assets/appraise/icon/appraise_icon_fujansc.png"/>
                  <span class="up-text">附件上传</span>
                </div>
              </el-upload>
              <div class="p-t-12 cursor-p"
                   @click="handleDelete(item,index)"
              >
                <img class="up-img" src="@/assets/appraise/icon/appraise_icon_delete.png"/>
                <span class="delete-text">删除</span>
              </div>
            </div>
            <div slot="reference" v-if="is_operating"
                 :class="personal_eit?'cursor-p':''"
                 class="text-font more-box">
              <img class="w-h-100" src="@/assets/appraise/icon/appraise_icon_more.png">
            </div>
          </el-popover>
        </div>
      </div>
    </div>

    <div class="add-box cursor-p" v-if="is_add_content && personal_eit" @click="handleAddMyDuty">
      <i class="el-icon-circle-plus-outline"></i>
      <span class="add-text">添加</span>
    </div>

    <vxe-modal v-model="centerDialogVisible" class="modalBox" title="选择关联计划" width="60%" height="60%" show-zoom resize>
      <template v-slot>
        <div class="personage">
          <div class="flex-a f-s-16 b-b-1" style="justify-content: space-between">
            <div class="flex-a f-s-18">
              <div @click="changeTab(0)" :class="dialog_tab === 0?'c-blue':'c-f'">周计划</div>
              <div @click="changeTab(1)" :class="dialog_tab === 1?'c-blue':'c-f'" style="margin-left: 10px">月计划</div>
            </div>
            <div class="flex-a">
              <div class="flex-a">
                <div style="margin-right: 4px">计划年月</div>
                <el-select @change="handleSelectMouth"
                           class="help—change"
                           v-model="mouth_value" placeholder="请选择月份">
                  <el-option
                    v-for="item in mouth_List"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div v-if="dialog_tab === 0" class="flex-a">
                <div style="margin: 0 4px">计划周</div>
                <el-select @change="handleSelectWeek"
                           class="help—change"
                           v-model="week_value" placeholder="请选择周">
                  <el-option
                    v-for="item in week_List"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div v-if="!plan_content_list || !plan_content_list.length" class="f-s-16" style="text-align: center;line-height: 70px;">暂无内容</div>
          <div v-for="(item, index) in plan_content_list" :key="item.id" class="personage_box">
            <p class="text-number">{{ index + 1 }}</p>
            <p class="personage-text" v-html="item.content" />
            <div style="width: 62px;">
              <el-progress
                color="#1A66E2"
                :width="17"
                :text-inside="true"
                type="circle"
                :percentage="Number(item.progress)"/>
              <span class="f-s-16 color-9"
              >{{ item.progress }}%</span>
            </div>
            <el-radio class="radio-po" v-model="plan_subId" :label="item.planSubId">可选择</el-radio>
          </div>
          <div class="flex-a flex-j" style="width: 96%;position: absolute;bottom: 0">
            <div class="inquire-1 cursor-p" @click="handleConfirm">确认</div>
          </div>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script>

import RichText from '../RichText'
import { syncRequest,fileUpload,fileDownload } from '@/utils/httpRequet'

const calcRatio = str => {
  let num = Number(str)
  if (num > 100) num = 100
  if (num < 0) num = 0
  num = Math.floor(num)
  return num
}
export default {
  name: 'EitContent',
  components: {
    RichText
  },
  props: {
    text: {
      type: Array,
      default: () => ([])
    },
    text_id: {
      type: String,
      default: ''
    },
    font_size: {
      type: Number,
      default: 1
    },
    font_family: {
      type: Number,
      default: 1
    },
    personal_eit: {
      type: Boolean,
      default: false
    }, //是否能编辑
    is_add_content: {
      type: Boolean,
      default: false
    }, //是否添加内容
    is_schedule: {
      type: Boolean,
      default: false
    }, //进度
    is_align: {
      type: Boolean,
      default: false
    }, //对齐
    is_over_time: {
      type: Boolean,
      default: false
    }, //完成时间
    is_operating: {
      type: Boolean,
      default: false
    }, //操作
    is_status: {
      type: Boolean,
      default: false
    }, //状态
    is_category: {
      type: Boolean,
      default: false
    }, //类别
    is_time_limit: {
      type: Boolean,
      default: false
    }, //时间
    router_type: {
      type: String,
      default: ''
    }, //模块类型
    type_num: {
      type: Number,
      default: 0
    },//模块中的小类
    // 被艾特的候选人列表
    userList: {
      default: () => []
    },
    isAit: {
      type: Boolean,
      default: false
    },
    mouth_List: {
      type: Array,
      default: () => ([])
    } //选择月份
  },
  data() {
    return {
      gridData: [],
      select_man: false,
      mouth_value: '',
      week_value: '',
      week_List: [],
      plan_content_list: [],
      plan_subId: '',
      dialog_tab: 0,
      centerDialogVisible: false,
      record_class: false,
      name: '',
      item_storage: {},
      index_storage: -1,
      is_name: false,
      is_add_text: false,
      time_range: '',
    }
  },
  methods: {
    focusRichText(idx) {
      if(this.personal_eit) {
        this.$refs.RichText[idx].focus()
        this.text[idx].is_eit = true
      }
    },
    // 富文本失去焦点时
    richTextBlur(contentStr, item, index) {
      console.log(contentStr, item, index)
      // this.$set(this.text, index, { ...this.text[index],  content: contentStr })

      const operItem = { ...this.text[index], content: contentStr }

      this.handleEnd(operItem, index, 0)
    },
    /**
     * @name 改变类型
     * @param type 接参
     */
    changeType(type,item,index) {
      item.recordClass = type
      item.record_class = false
      this.handleEnd(item, index, 2)
    },
    /**
     * @name 改变状态
     * @param type 接参
     */
    changeState(type,item,index) {
      item.state = type
      item.is_status = false
      this.handleEnd(item, index, 5)
    },
    /**
     * @name 改变进度
     * @param e 接参
     */
    handleChangeSchedule(e, item, index) {
      if (e < 0 || e == '' || e == undefined) {
        e = 0
        this.text[index].progress = 0
      }
      if (e > 100) {
        e = 100
        this.text[index].progress = 100
      }
    },
    /**
     * @name 改变时间
     * @param e 接参
     */
    handleSelectTime(e, item, index) {
      item.endDate = this.formateDate(e)
      this.text[index].is_eit = false
      this.handleEnd(item, index, 4)
    },
    /**
     * @name 编辑结束
     * @param index
     */
    handleEnd(item, index, type) {
      if (this.router_type === 'plan') {
        item.planId = this.text_id
      }
      if (type !== 0) {
        console.log(item.content)
        console.log(item.text)
        item.content = item.text
        let obj_content = {
          text: item.content,
          htmlText: item.htmlText,
          relateUserList: item.relateUserList
        }
        item.content = JSON.stringify(obj_content)
      }
      if(type !== 6 && item.fileList && item.fileList.length) {
        item.contentFileList = item.fileList[0].attachId
      }
      const { htmlText } = JSON.parse(item.content)
      console.log(JSON.parse(item.content))
      if (htmlText == '') {
        console.log(this.is_add_text)
        if (!this.is_add_text) {
          this.$emit('handleDeleteDuty', { item, index })
        }
        this.text.splice(index, 1)
        this.is_add_text = false
        return
      }
      if (this.is_add_text) {
        this.$emit('handleAddDuty', { item, index })
        this.is_add_text = false
      } else {
        this.$emit('handleEitContent', { item, index })
        this.text[index].eit_time = false
      }
      this.text[index].is_eit = false
      this.item_storage = {}
      this.index_storage = -1
    },
    /**
     * @name 编辑任务
     * @param index
     */
    handleChangeEit(index) {
      if (this.personal_eit) {
        this.text[index].is_eit = true
      }
    },
    //内容序号高度
    valTop(val) {
      const marginTop = {
        '0': 'margin-top: 8px;width:20px;height: 20px;',
        '1': 'margin-top: 6.4px;width:17px;height: 17px;',
        '2': 'margin-top: 4px;width:13px;height: 13px;'
      }
      return marginTop[val]
    },
    /**
     * @name 字体调整
     */
    contentFont(value, value2) {
      const fontSize = {
        '0': 'font-size-b', '1': 'font-size-m', '2': 'font-size-s'
      }
      const family = {
        '0': 'font-family-s', '1': 'font-family-y', '2': 'font-family-h'
      }
      return `${fontSize[value]} ${family[value2]}`
    },
    /**
     * @name 增加我的职责
     */
    handleAddMyDuty() {
      if (this.personal_eit) {
        if (this.router_type === 'plan') {
          if (!this.text.length) {
            this.$emit('addPlan')
          }
          this.text.push({
            content: '',
            is_eit: true,
            eit_time: false,
            endDate: this.formateDate(new Date()),
            progress: '0'
          })
        } else if(this.router_type === 'duty') {
          if (!this.text.length) {
            this.$emit('AddCurrentYearDuty')
          }
          this.text.push({
            content: '',
            is_eit: true
          })
        }else if(this.router_type === 'record') {
          this.text.push({
            content: '',
            is_eit: true,
            eit_time: false,
            fileList: [],
            htmlText: '',
            planSubId: '',
            recordClass: "2",
            progress: '0',
            relateUserList: []
          })
        }
        this.$nextTick(()=> {
          this.$refs.RichText[this.text.length - 1].focus()
        })
        this.is_add_text = true
      }
    },
    /**
     * @name 编辑时间
     * @param index
     */
    handleEitTime(index) {
      if (this.personal_eit) {
        this.text[index].eit_time = true
        this.$refs[`timeEndDate${index}`][0].focus()
      }
    },
    /**  选择时间范围
     * @param index
     */
    handleTimeLimit(index) {
      if (this.personal_eit) {
        this.text[index].eit_time = true
        this.$refs[`timePicker${index}`][0].focus()
      }
    },
    /**  确认时间范围
     */
    confirmTimeLimit(e, item, index) {
      this.text[index].is_eit = false
      item.startTime = this.formateTime(e[0])
      item.endTime = this.formateTime(e[1])
      this.handleEnd(item, index, 1)
    },
    //日期转化
    formateDate(data) {
      let year = data.getFullYear()
      let month = data.getMonth() + 1
      let day = data.getDate()
      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      return year + '-' + month + '-' + day
    },
    //时间转化
    formateTime(data) {
      let h = data.getHours()
      let m = data.getMinutes()
      if (m < 10) m = '0' + m
      if (h < 10) h = '0' + h
      return h + ':' + m
    },
    /**
     * @name 上传
     */
    handleUp(file,item, index) {
      item.is_operating = false
      if(item.fileList.length) return  this.$message.warning({ message:'已有附件', center: true })
      const get_key = syncRequest({ url: 'pubGetKey' })
      if(get_key.errorCode === '1') {
        const key = get_key.data
        let from_data = new FormData()
        from_data.append('_key', key)
        from_data.append('sn', '1')
        from_data.append('property', 'file')
        from_data.append('file', file)
        fileUpload('upLoadFile', from_data).then(res => {
          if (res.status === 200) {
            item.contentFileList = key
            item.fileName = file.name
            this.handleEnd(item, index, 6)
          }
        })
      }
      return false
    },
    /** 下载
     * @param item 数据对象
     * @param index 附件位置
     */
    handleDown(item, index) {
      fileDownload('fileDownload',{
        param:{ attachId: item.fileList[0].attachId }
      })
    },
    /** 删除
     */
    handleDelete(item, index) {
      item.is_operating = false
      item.contentFileList = ''
      item.fileName = ''
      this.handleEnd(item, index, 6)
    },
    /** 关联plan
     */
    associatePlan(item,index) {
      if(!this.personal_eit) return
      if(this.router_type !== 'record') return
      this.week_value = ''
      this.mouth_value = ''
      this.plan_content_list = []
      this.item_storage = item
      this.index_storage = index
      this.dialog_tab = 0
      this.plan_subId = ''
      this.centerDialogVisible = true
    },
    /** 选择tab
     */
    changeTab(index) {
      this.dialog_tab = index
      this.mouth_value = ''
      this.week_value = ''
      this.week_List = []
      this.plan_content_list = []
    },
    /** 选择月
     */
    handleSelectMouth() {
      if(this.dialog_tab === 0 && this.mouth_value ) {
        const get_month_week_list = syncRequest({
          url: 'getMonthWeekList',
          data: {
            month: this.mouth_value,
          }
        })
        if(get_month_week_list.errorCode === '1') {
          this.week_List = []
          get_month_week_list.data.forEach((res, index) => {
            const item = {
              label: index+1+'周',
              value: res.weekCode
            }
            this.week_List.push(item)
          })
        }
      }else{
        const get_month = syncRequest({
          url: 'planUserGetMonth',
          data: {
            userId: '',
            month: this.mouth_value,
          }
        })
        if(get_month.errorCode === '1') {
          this.plan_content_list = get_month.data.contentList
        }
      }
    },
    /** 选择周
     */
    handleSelectWeek() {
      const get_week = syncRequest({
        url: 'planUserGetWeek',
        data: {
          userId: '',
          weekCode: this.week_value,
        }
      })
      if(get_week.errorCode === '1') {
        this.plan_content_list = get_week.data.contentList
      }
    },
    /** 选择确认
     */
    handleConfirm() {
      this.item_storage.planSubId = this.plan_subId
      this.centerDialogVisible = false
      this.handleEnd(this.item_storage, this.index_storage, 7)
    },
  }
}
</script>

<style scoped>
.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-a {
  display: flex;
  align-items: center;
}
.flex-j {
  justify-content: center;
}
.flex-d-r-r {
  flex-direction: row-reverse;
}
::v-deep .el-input__inner {
  width: 120px;
  font-size: 16px;
}
::v-deep .help—change .el-input__inner {
  width: 140px;
  font-size: 16px;
}
.no-use {
  width: 50px !important;
}
::v-deep .no-use .el-input__inner {
  width: 55px !important;
  font-size: 16px;
}
.right-title {
  font-size: 16px;
  color: #999999;
}
.b-b-1 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
::v-deep .el-progress {
  top: 5px;
}
.cursor-p {
  cursor: pointer;
}

.card-content-1 {
  margin-left: 30px;
}
.card-content-2 {
  margin-left: 4px;
}
.card-content-3 {
  margin-left: 10px;
}
.p-a-20 {
  padding: 0.5rem 1rem;
}

.input-enter {
  border: 1px solid #1966E2;
  border-radius: 0.2rem;
  box-shadow: 0 0.2rem 0.55rem 0 #D5E4FF;
}

.b-tran {
  border: 1px solid transparent;
  border-radius: 0.2rem;
}

.content-box {
  display: flex;
  justify-content: space-between;
}

>>> .el-textarea__inner {
  padding: 0 0.4rem;
  border: none;
  font-family: "Microsoft YaHei";
  font-size: 16px;

}
.el-icon-circle-plus-outline {
  font-size: 22px;
  border-radius: 0.2rem;
}

.features {
  padding-top: 10px;
}

.content-bit {
  width: 17px;
  height: 17px;
  border-radius: 2px;
  background-color: rgba(59, 117, 255, 1);
  color: #FFFFFF;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0.2rem;
}
::v-deep .user-tag {
  color: #fff;
  background-color: #07f;
  padding: 0 5px;
  border-radius: 999em;
  display: inline-block;
  user-select: all;
}
.content-bit-eit {
  border-radius: 2px;
  background-color: #AEB1B8;
  color: #FFFFFF;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: 0.1rem;
}
.up-box {
  height: 35px;
  line-height: 35px;
  padding-left: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.c-blue {
  color: #1C66E2;
}
.c-f {
  color: #000000;
}
.c-f:hover {
  color: #ee1d2d;
}
.up-img {
  width: 14px;
  height: 14px;
}
.color-ff {
  color: #FF000C !important;
}
.b-c-ff {
  background-color: #FF000C;
}
.color-fb {
  color: #FB7700 !important;
}
.b-c-fb {
  background-color: #FB7700;
}
.color-1a {
  color: #1A66E2 !important;
}
.b-c-1a {
background-color: #1A66E2;
}
.border-ff {
  border: 1px dashed #FF000C;
}
.border-fb {
  border: 1px dashed #FB7700;
}
.border-1a {
  border: 1px dashed #1A66E2;
}
::v-deep .el-upload {
  width: 100%;
  text-align: left;
}
.bit {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bit-content {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.up-text {
  font-size: 16px;
  color: #666666;
}
.inquire-1 {
  padding: 6px 14px;
  margin-bottom: 10px;
  color: #FFFFFF;
  background-color: #1C66E2;
  border: 1px solid #1C66E2;
  border-radius: 4px;
  box-shadow: 0 0 2px 0 #1C66E2;
  font-size: 16px;
}
.delete-text {
  margin-left: 0.45rem;
  font-size: 16px;
  color: #666666;
}
.more-box {
  margin-top: 2px;
  width: 16px;
  height: 16px;
}

.w-h-100 {
  width: 100%;
  height: 100%;
}

.add-box {
  color: rgba(153, 153, 153, 1);
  width: 78px;
  margin-left: 2.38rem;
  padding-top: 11px;
  display: flex;
  align-items: center;
}
.personage_box {
  width: 100%;
  padding: 10px 0;
  display: flex;
  border-bottom: 1px solid #eee;
}

.personage_box:nth-last-child(1) {
  border-bottom: none;
}

.personage_box > p:nth-child(1) {
  width: 17px;
  height: 17px;
  line-height: 17px;
  opacity: 1;
  background: #1966e2;
  border-radius: 2px;
  color: #fff;
  text-align: center;
  margin-right: 10px;
  font-size: 13px;
  position: relative;
  top: 4px;
}
.radio-po {
  position: relative;
  top: 6px;
}
.personage-text {
  flex: 1;
  font-size: 16px;
}
.personage {
  padding: 10px;
  max-height: calc( 100vh - 460px);
  overflow: auto;
}
.add-box:hover {
  color: #c61111;
}

.add-text {
  margin-left: 4px;
  font-size: 16px;
}

.l-h-15 {
  line-height: 1.7;
}

.content-text-1 {
  flex: 1;
  font-size: 16px;
  margin-left: 7px;
}

.p-t-12 {
  height: 35px;
  line-height: 35px;
  padding-left: 4px;
}
.p-t-12:hover {
  background-color: #F1F2F3;
}
.up-box:hover {
  background-color: #F1F2F3;
}
.m-l-5 {
  margin-left: 5px;
}

.font-family-s {
  font-family: '宋体', Simsun;
}

.font-family-y {
  font-family: "Microsoft YaHei";
}

.font-family-h {
  font-family: "Hiragino Sans GB";
}

.font-size-b {
  font-size: 20px;
}

.font-size-m {
  font-size: 16px;
}

.font-size-s {
  font-size: 12px;
}
.relevant-text {
  width: 6rem;
  margin: 0 2.1rem;
  color: #1B64E2;
  font-size: 16px
}

.p-4-0-11-0 {
  padding: 4px 0 11px 0;
}

.p-4-0 {
  padding: 4px 0;
}

.text-font {
  font-size: 16px;
  color: #999999;
  display: flex;
}

.f-s-16 {
  font-size: 16px;
}
.f-s-18 {
  font-size: 18px;
}
.m-b-4 {
  margin-bottom: 4px;
}

.m-t-4 {
  margin-top: 4px;
}

.color-9 {
  color: #999999;
}

.suffix {
  width: 32px;
  height: 36px;
  background-color: #F5F4F4;
  border: 1px solid #E3E3E3;
  border-radius: 0 4px 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 5px;
}

.m-r-24 {
  margin-right: 24px;
}
.m-r-12 {
  margin-right: 12px;
}

@media (max-width: 1024px) {
  .f-s-16 {
    font-size: 14px;
  }
  .f-s-18 {
    font-size: 16px;
  }
  .right-title {
    font-size: 14px;
    color: #999999;
  }
  .font-size-b {
    font-size: 18px;
  }
  .card-content-1 {
    margin-left: 34px;
  }
  .card-content-2 {
    margin-left: 12px;
  }
  .card-content-3 {
    margin-left: 20px;
  }
  .font-size-m {
    font-size: 14px;
  }

  .font-size-s {
    font-size: 12px;
  }
  .text-font {
    font-size: 14px;
    color: #999999;
    display: flex;
  }
  .personage-text {
    flex: 1;
    font-size: 14px;
  }
  .up-text {
    margin-left: 9px;
    font-size: 14px;
    color: #666666;
  }

  .personage_box > p:nth-child(1) {
    width: 14px;
    height: 14px;
    line-height: 14px;
    opacity: 1;
    background: #1966e2;
    border-radius: 2px;
    color: #fff;
    text-align: center;
    margin-right: 10px;
    font-size: 12px;
    position: relative;
    top: 4px;
  }
  .radio-po {
    position: relative;
    top: 4px;
  }
  .inquire-1 {
    padding: 6px 14px;
    margin-bottom: 10px;
    color: #FFFFFF;
    background-color: #1C66E2;
    border: 1px solid #1C66E2;
    border-radius: 4px;
    box-shadow: 0 0 2px 0 #1C66E2;
    font-size: 14px;
  }
  .delete-text {
    margin-left: 0.45rem;
    font-size: 14px;
    color: #666666;
  }
  ::v-deep .el-input__inner {
    width: 120px;
    font-size: 14px;
  }
  ::v-deep .help—change .el-input__inner {
    font-size: 14px;
  }
  .content-bit {
    width: 17px;
    height: 17px;
    border-radius: 2px;
    background-color: rgba(59, 117, 255, 1);
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0.5rem;
  }
}
</style>
